<template>
<x-main>
  <x-input :required="true" label="门店名称" v-model="state.form.storeName" placeholder="请输入门店名称"></x-input>

  <x-input :required="true" label="售后电话" v-model="state.form.customerServiceNumber" placeholder="请输入售后电话号码"></x-input>
  <x-select :required="true" v-model="state.form.province" @onChange="onChangeProvince" label="省份" :options="state.provinceList"></x-select>
  <x-select :required="true" v-model="state.form.city" @onChange="onChangeCity" label="城市" :options="state.cityList"></x-select>
  <x-select :required="true" v-model="state.form.county" @onChange="onChangeArea" label="区县" :options="state.areaList"></x-select>

  <x-input :required="true" v-model="state.form.storeDetailAddress" label="详细地址"></x-input>
  <x-cell title="状态">
    <template #value>
      <x-radio-button align="right" v-model="state.form.status" :list="OPEN_STATUS"></x-radio-button>
    </template>
  </x-cell>
  <x-input inputType="textarea" :border="false" label="备注" v-model="state.form.remark"></x-input>
</x-main>
  <x-bottom>
    <view class="x-btn x-btn-primary" @click="onSubmit">提交</view>
  </x-bottom>
</template>

<script setup>
import XRadioButton from '@/components/form/radioButton'
import areaStore from '@/stores/framework/area.js';
const AreaStore = areaStore();
import store from '@/stores/modules/store';
const Store  = store();
import {Helper, Http, Msg} from 'core';
import {reactive} from "vue";
import {onLoad} from "@dcloudio/uni-app";
import {storeToRefs} from "pinia";
const {areaMap} = storeToRefs(AreaStore)
const state = reactive({
  form :{
    storeId: "",
    storeName: "",
    customerServiceNumber: "",
    remark: "",
    status: "1",
    storeDetailAddress: "",
    province: "",
    city: "",
    county: ""
  },
  provinceList: [],
  cityList: [],
  areaList: [],
  address: {}
})

onLoad(async (option) => {
  state.provinceList = await AreaStore.getAreaList();

  if(! Helper.empty(option.id)) {
    state.form.storeId = option.id;
    state.form = await Store.getInfo(state.form.storeId)
    state.cityList = await AreaStore.getAreaList(state.form.province);
    state.areaList = await AreaStore.getAreaList(state.form.city);
  }
})

const onSubmit = async () => {
  state.address = {
    provinceName: areaMap.value[state.form.province],
    cityName: areaMap.value[state.form.city],
    areaName: areaMap.value[state.form.county],
  };
  let isOk = Helper.empty(state.form.storeId) ? await Store.save(state.form, state.address) : await Store.update(state.form, state.address);
  if(isOk) {
    uni.navigateBack();
  }
}

const onChangeProvince = async (value, name) => {
  if(Helper.empty(value)) {
    return;
  }

  state.areaList = [];
  state.cityList = [];
  state.cityList = await AreaStore.getAreaList(value);
}

const onChangeCity = async (value, name) => {
  if(Helper.empty(value)) {
    return;
  }

  state.areaList = [];
  state.areaList = await AreaStore.getAreaList(value);
}

const onChangeArea = async (value, name) => {

  if(Helper.empty(value)) {
    return;
  }
}

</script>

<style scoped lang="less">

</style>
